<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎！注册</title>
    <script src="./Resources/js/main.js"></script>
    <link rel="stylesheet" href="./Resources/css/auth.min.css">
</head>
<body>
    <div class="app">
        <div class="formMax rowStartCenter">
            <div class="rowCenterCenter" style="padding-top: 3.5vh;">
                <img src="./Resources/imgs/lg.png" alt="暂无图片">
            </div>
            <div class="form">
                <div class="h2">注册</div>
                <form>
                    <div class="inputBox">
                        <div class="input">
                            <input type="text" placeholder="请输入账号/用户名/手机号" name="userName" autocomplete="username">
                        </div>
                    </div>
                    <div class="inputBox">
                        <div class="input">
                            <input type="password" placeholder="请输入密码" name="password" autocomplete="new-password">
                        </div>
                    </div>
                    <div class="inputBox">
                        <div class="input">
                            <input type="password" placeholder="确认密码" name="okPwd" autocomplete="new-password">
                        </div>
                    </div>
                    <div class="rowEndCenter form-bottom">
                        <button type="submit">注册</button>
                    </div>
                </form>
                <div class="form-below rowCenterCenter">
                    <span>已有账号？</span>
                    <a href="./login.html">立即登录</a>
                </div>
            </div>
        </div>
    </div>
    <script>
        window.addEventListener("DOMContentLoaded", () => {
            initialize(".app",{
                showLoading: true,
                message: "数据加载中..."
            }).then(() => {
                document.querySelector("form").addEventListener("submit",(e) => {
                    e.preventDefault();
                    if (document.activeElement) {
                        document.activeElement.blur();
                    };
                    register();
                });
            }).catch(error => {
                alert(error);
            })
        });

        function register() {
            const form = document.querySelector("form");
            const formData = {
                name: form.querySelector('input[name="userName"]').value,
                password: form.querySelector('input[name="password"]').value,
                okpwd: form.querySelector('input[name="okPwd"]').value
            };
            const formDataTips = {
                name: "用户名/账号/手机号不能为空！",
                password: "密码不能为空！",
                okpwd: "请再次确认密码"
            };
            for(let key in formData) {
                if(!formData[key] || formData[key] === "") {
                    alert(formDataTips[key], null, "warning");
                    return;
                }
            };
            if(formData.password !== formData.okpwd) {
                alert("两次输入的密码不一致，请重新输入", null, "warning");
                return;
            };
            const dialog = $.loading("注册中，请稍后", "rgba(0,0,0,0.6)", "#ffffff");
            dialog.show();
            ajax("POST", `${$.baseUrl}/api/register`, {userName: formData.name,password:formData.password}).then(data => {
                dialog.hide();
                if(!data.success) {
                    notification({
                        message: data.message,
                        type: "warning"
                    });
                    return;
                } else {
                    $.storage.set("temporary", data.data.USER_ACCOUNT)
                    window.location.href = "./login.html";
                }
            }).catch(error => {
                dialog.hide();
                notification({
                    message:error.message,
                    type:'error'
                });
            })
        };
    </script>
</body>
</html>